iT邦幫忙

2024 iThome 鐵人賽

DAY 17
0
Modern Web

React 學得動嗎系列 第 17

[Day 17] 幾個React 效能優化技巧

  • 分享至 

  • xImage
  •  

今天,我們將聊聊如何提升 React 應用的效能,確保應用能夠在不同情境下高效運行。效能優化是開發高效軟體的關鍵,不僅能提升使用者體驗,還能減少伺服器和用戶端的資源消耗。

為什麼要做效能優化?

效能優化可以確保應用在高負載情況下保持流暢,避免用戶因為頁面回應速度過慢而流失。就像一間餐廳如果服務速度慢,顧客體驗也會大打折扣。同樣,提升 React 應用的效能能夠讓用戶更快速地與應用互動,增強整體體驗。

React 效能優化的絕招

1. 程式碼分割(Code Splitting)

程式碼分割是提升效能的重要手段。可以將應用程式劃分為多個較小的部分,根據需要而動態加載,減少初始加載時間。

import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function MyApp() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

2. 虛擬列表(Virtualized List)

當處理大量資料時,使用虛擬列表技術可以有效降低渲染成本。這樣應用只會渲染當前可見區域的資料,而非一次渲染整個列表。

import React from 'react';
import { FixedSizeList as List } from 'react-window';

function Row({ index, style }) {
  return <div style={style}>Row {index}</div>;
}

function LongList() {
  return (
    <List
      height={400}
      itemCount={1000}
      itemSize={35}
      width={300}
    >
      {Row}
    </List>
  );
}

3. 記憶化(Memoization)

記憶化是一種記憶化技術,在[Day 10] React 效能優化:把網站的腿接起來中有介紹到,它可以避免不必要的重渲染,從而提升效能。對於經常重複渲染的元件,我們可以使用 React.memo 來優化。

import React, { memo } from 'react';

const MyComponent = memo(function MyComponent(props) {
  // 只有當 props 改變時才會重新渲染
});

4. 使用 useCallback 和 useMemo

這兩個 Hook 主要用於避免在每次渲染時重新創建函數或計算結果。useCallback 用來記憶函數,useMemo 則用來記憶計算結果。

import React, { useCallback, useMemo } from 'react';

function MyComponent({ data, onItemClick }) {
  const handleClick = useCallback((item) => {
    onItemClick(item);
  }, [onItemClick]);

  const sortedData = useMemo(() => {
    return [...data].sort();
  }, [data]);

  // ...
}

5. 避免不必要的渲染

透過 React 的 memouseCallback 等技術,我們可以避免元件不必要的重複渲染,進一步提升效能。

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <>
      <Counter count={count} />
      <Button onClick={increment}>Increment</Button>
    </>
  );
}

const Counter = React.memo(({ count }) => {
  return <div>Count: {count}</div>;
});

const Button = React.memo(({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
});

效能優化的實戰技巧

  1. 使用 Chrome 開發者工具:Chrome 的 Performance 面板可以幫助你分析應用的效能瓶頸,找出哪些部分的渲染耗時過長。

  2. 使用 React Developer Tools:React 的開發者工具提供 Profiler,能夠顯示每個元件的渲染時間,幫助你精準定位需要優化的部分。

  3. 延遲加載(Lazy Loading):對於非關鍵的元件或模組,使用延遲加載可以顯著縮短初始頁面加載的時間。

  4. 使用生產版本:確保在生產環境中使用 React 的生產版本,它經過多層優化,相較於開發版本運行得更快。

  5. 優化依賴:使用如 webpack-bundle-analyzer 這樣的工具來檢查和優化應用中的依賴大小,減少不必要的模組載入。

小結

今天,我們了解了多種 React 應用的效能優化技巧。效能優化是一個持續的過程,需要根據具體的應用情況和使用者需求來逐步調整。在開發初期,要先專注於寫出正確的程式碼,而效能優化應該是在應用穩定後再來進行,避免過早優化導致程式碼難以維護。

如果你想進一步深入了解 React 的效能優化,可以參考 React 官方文件中的效能優化章節


上一篇
[Day 16] React 進階技巧:HOC 與 Render Props
下一篇
[Day 18] React 實戰:打造健身房後台 Dashboard
系列文
React 學得動嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言